<template>
   <view class="uv-page">
      <uv-gap height="30" bgColor="#fff"></uv-gap>
      <uv-toast ref="uToast"></uv-toast>
      <uv-cell-group title-bg-color="rgb(243, 244, 246)">
         <uv-cell
            :titleStyle="{ fontWeight: 500 }"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
            :icon="item.iconUrl"
            @click="showToast(item)"
         >
         </uv-cell>
      </uv-cell-group>
   </view>
</template>

<script lang="ts" setup>
import type { UvToastMethods } from '@/uvui-ts/components/uv-toast';
import { computed, ref } from 'vue';

const uToast = ref<UvToastMethods>();

const list = ref([
   {
      type: 'default',
      title: '默认主题',
      message: '锦瑟无端五十弦',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png',
   },
   {
      type: 'error',
      title: '失败主题',
      message: '一弦一柱思华年',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
   },
   {
      type: 'success',
      title: '成功主题(带图标)',
      message: '庄生晓梦迷蝴蝶',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
   },
   {
      type: 'warning',
      position: 'top',
      title: '位置偏移上方',
      message: '望帝春心托杜鹃',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',
   },
   {
      type: 'loading',
      title: '正在加载',
      message: '正在加载',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png',
   },
   {
      type: 'default',
      title: '结束后跳转标签页',
      message: '此情可待成追忆',
      url: '/pages/componentsD/tag/tag',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png',
   },
]);

const getIcon = computed(() => {
   return (path: string) => {
      return `https://cdn.uviewui.com/uview/example/${path}.png`;
   };
});
const showToast = (item: any) => {
   // 现在这里应该有完整的方法提示：show, hide, success, error, warning, loading 等
   uToast.value?.show({
      ...item,
      complete() {
         item.url &&
            uni.navigateTo({
               url: item.url,
            });
      },
   });
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
